<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
    </style>
    <!--<link rel='stylesheet' href='/css/reset.css'>-->

    <style>
        @import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
        @import url("http://fonts.useso.com/css?family=Open+Sans:400,300,100");
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        h3 {
            font-size: 32px;
            margin-bottom: 10px;
        }
        h5 {
            text-align: center;
        }
        .menu {
            background: orange;
            font-family: 'Open Sans', sans-serif;
            font-size: 16px;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }
        .menu ul {
            display: flex;
            justify-content: center;
            max-width: 1080px;
            margin: auto;
        }
        .menu li {
            position: relative;
            min-width: 250px;
            border-right: solid 1px rgba(0, 0, 0, 0.2);
        }
        .menu li:first-child {
            border-left: solid 1px rgba(0, 0, 0, 0.2);
        }
        .menu a {
            text-decoration: none;
            color: #333;
            display: block;
            padding: 20px 30px;
            transition: 0.5s;
            text-transform: uppercase;
        }
        .menu a:hover {
            background: rgba(0, 0, 0, 0.2);
            display: block;
            text-indent: 24px;
            color: #fff;
        }
        .menu li:before {
            content: "";
            position: absolute;
            width: 24px;
            height: 24px;
            left: 20px;
            transform: scale(0);
            top: 50%;
            margin-top: -12px;
            transition: 0.2s;
            font-family: FontAwesome;
            font-size: 24px;
            color: #fff;
        }
        .menu li:hover:before {
            transform: scale(1);
            transition: 0.3s 0.3s;
        }
        .menu li a:before,
        .menu li a:after {
            border-radius: 0;
            transition: 5s;
        }
        .menu li a:hover:before,
        .menu li a:hover:after {
            content: "";
            position: absolute;
            z-index: -1;
            -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
            -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
            top: 0;
            bottom: 0;
            left: 20px;
            right: 20px;
            border-radius: 100px / 10px;
        }
        .menu li#home:before {
            content: "\f015";
        }
        .menu li#about:before {
            content: "\f007";
        }
        .menu li#contact:before {
            content: "\f0e0";
        }
        .content {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box {
            background: #ddd;
            padding: 30px;
        }
    </style>
</head>
<body>

<nav class="menu">
    <ul>
        <li id="home"><a href="#">Home</a>
        </li>
        <li id="about"><a href="#">About</a>
        </li>
        <li id="contact"><a href="#">Contact</a>
        </li>
    </ul>
</nav>
<main class="content">
    <div class="box">
        <h3>Menu buttons with sliding effect</h3>
        <h5>#flexboxfridays</h5>
    </div>
</main>
</body>
</html>